<template>
  <div>
    <!-- <div>&nbsp;</div>
    <div>&nbsp;</div>
    Login Page -->
    <!-- <div>&nbsp;</div>
    <div>&nbsp;</div> -->

    <h2>欢迎使用 DIY ERP</h2>

    <van-form @submit="onSubmit">
      <!-- <van-field
        label="数据库"
        :value="form2.database"
        readonly
        @click="showDatabasePicker = true"
      /> -->

      <van-popup v-model="showDatabasePicker" position="bottom">
        <van-picker
          v-if="showDatabasePicker"
          title="选择数据库"
          show-toolbar
          :default-index="
            database_options.findIndex(item => item === form2.database)
          "
          :columns="database_options"
          @confirm="onConfirmDatabase"
          @cancel="showDatabasePicker = false"
        />
      </van-popup>

      <van-field
        v-model="form2.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form2.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>

    <!-- {{ form_data }} -->
    <!-- -->
    <!-- <a-form-model
      ref="ruleForm"
      :model="form2"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-form-model-item prop="database" label="数据库">
        <a-select v-model="form2.database">
          <a-select-option
            v-for="item in database_options"
            :value="item"
            :key="item"
            >{{ item }}</a-select-option
          >
        </a-select>
      </a-form-model-item>

      <a-form-model-item prop="username" label="账号">
        <a-input v-model="form2.username" placeholder="用户账号" />
      </a-form-model-item>

      <a-form-model-item prop="password" label="密码">
        <a-input-password v-model="form2.password" placeholder="密码" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" @click="onSubmit"> Submit </a-button>
      </a-form-model-item>
    </a-form-model> -->
  </div>
</template>

<script>
import loginMixin from '@/mixins/loginMixin'

export default {
  name: 'AppLogin',
  components: {},
  mixins: [loginMixin],

  data() {
    return {
      showDatabasePicker: false
    }
  },
  computed: {},
  async created() {
    this.init()
  },

  methods: {
    onConfirmDatabase(val) {
      // console.log('onConfirmDatabase', val, this.form2)

      this.form2.database = val

      this.showDatabasePicker = false
    },
    onSubmit(values) {
      console.log('onSubmit', values, this.form2)

      const success = res => {
        console.log('login ok:', res)
        // Toast.success(res.name + '登录')
        this.$router.push({ path: '/' })
      }
      // eslint-disable-next-line no-unused-vars
      const error = e => {
        // console.log(e)
      }
      this.handleLogin(this.form2, success, error)
    }
  }
}
</script>

<style type="text/css"></style>
